const path = require('path')

//启用热更新的第2步
const webpack = require('webpack')

//导入在内存中生成HTML 页面的插件
//只要是插件，都一定要 放到plugin 节点中去
//这个插件的两个作用
//1.自动在内存中根据指定页面生成一个内存的页面
//2.自动，把打包好的bundle.js追加到页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')

//这个配置文件，其实就是一个JS文件，通过NOde中的模块操作，向外暴露了一个配置对象
module.exports = {
    ///大家已经学会了举一反三，大家觉得，在配置文件中，需要手动指定入口和出口
    entry: path.join(__dirname, './src/main.js'), //入口,表示 要使用 webpack 打包那个文件夹的文件
    output: { //输出文件相关的配置
        path: path.join(__dirname, './dist'), //指定打包好的文件，输出到那个目录中去
        filename: 'bundle.js' //知识指定输出的文件名称
    },
    mode: 'development',
    devServer: { //这是配置dev-server 命令参数的第二种形式，相对来说，这种方式麻烦一些
        open: true, //自动打开浏览器
        port: 3000, //设置启动时候的运行端口
        contentBase: 'src', //指定托管的根目录
        hot: true //启动热更新的 第1步

    },
    plugins: [ //配置插件的节点
        new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象 这是启用热更新的第3步
        new htmlWebpackPlugin({ //创建一个在内存中生成HTML 页面的插件
            template: path.join(__dirname, './src/index.html'), //指定 模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html' //指定生成的页面的名称

        })
    ],
    module: { //这个节点，用于配置所有第三方 模块 加载器
        rules: [ //所有第三方模块的匹配规则
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, //配置处理 .css文件的第三方loader规则
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'] //配置处理 .less文件的第三方loader规则
            }, {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] //配置处理 .scss文件的第三方loader规则
            }
        ]

    }
}


//当我们在控制台，直接输入webpack 命令执行的时候，webpack做了一下几步：
//1. 首先 .webpack 发现，我们并没有通过命令的形式，给它指定入口和出口
//2. webpack就回去 项目的根目录中，查找一个叫做‘webpack.config.js’的配置文件
//3.当找到配置文件后，webpack回去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象
//4.当 webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后打包构建；


//使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
//1.运行npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
//2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样
//3.由于，我们是在项目中，本地安装的，所以无法把它当做 脚本命令，在pwoershell 终端中直接执行
//4.注意 webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中安装webpack
//5.webpack-dev-server 帮我们打包生成的bundle。js文件，并没有存放到实际上的 物理磁盘上，而是 直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的bundle.js;
//6.我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了 咱们项目的根目录中，虽然我们看不到它，但是，可以认为和 dist src node_modules 平级，有一个看不见的文件叫做bundle.js